<template>
	<view class="page">
		<!-- 续费提醒 -->
		<view class="message">
			<text>您购买的软件应用还有<text class="time">{{day}}</text>天到期请续费<text style="font-weight: 500;color: #609ee9;text-decoration:underline;" @click="renew">查看详情</text></text>
		</view>
		<!-- 信息 -->
		<view class="info">
			<view class="img">
				<image style="width: 100rpx;height: 100rpx;" src="../../static/index/logo.jpg"></image>
			</view>
			<view class="text">
				<view class="text-title">
					<text>欢迎来到金秋小区</text>
				</view>
			</view>
		</view>
		<view class="function">
			<view class="item">
				<view class="fl flex-item" @click="pay" style="box-shadow: 2rpx 2rpx 0rpx 0rpx #e5e5e5;">
					<view>
						<image style="width: 80rpx;height: 80rpx;" src="../../static/index/Property_payment.png"></image>
					</view>
					<view class="item-title">缴费管理</view>
				</view>
				<view class="fl flex-item" @click="repair" style="box-shadow: 0rpx 2rpx 0rpx 0rpx #e5e5e5;">
					<view>
						<image style="width: 80rpx;height: 80rpx;" src="../../static/index/repair_img.png"></image>
					</view>
					<view class="item-title">物业维修</view>
				</view>
				<view class="fl flex-item" @click="meterReading" style="box-shadow: 2rpx 0rpx 0rpx 0rpx #e5e5e5;">
					<view>
						<image style="width: 80rpx;height: 80rpx;" src="../../static/index/tickling.png"></image>
					</view>
					<view class="item-title">抄表功能</view>
				</view>
			</view>	
		</view>
	</view>
</template>

<script>
	export default {
		onPullDownRefresh() {
		    console.log('onPullDownRefresh', new Date())
		},
		data () {
			return {
				curStartTime: '2019-12-11 08:00:00',
				day: '0',
			}
		},
		mounted () {
			this.curStartTime = '2019-12-31 08:00:00'
			this.countTime()
		},
		methods: {
			renew () {
				setTimeout(()=>{
					dd.navigateTo({
						url: '../renew/renew'
					});
				},10);
			},
			pay () {
				setTimeout(()=>{
					dd.navigateTo({
						url: '../pay/pay'
					});
				},10);
			},
			repair () {
				setTimeout(()=>{
					dd.navigateTo({
						url: '../repair/repair'
					});
				},10);
			},
			meterReading () {
				setTimeout(()=>{
					dd.navigateTo({
						url: '../meterReading/meterReading'
					});
				},10);
			},
			// 倒计时
			countTime () {
			  // 获取当前时间
			  let date = new Date()
			  let now = date.getTime()
			  // 设置截止时间
			  let endDate = new Date(this.curStartTime) // this.curStartTime需要倒计时的日期
			  let end = endDate.getTime()
			  // 时间差
			  let leftTime = end - now
			  // 定义变量 d,h,m,s保存倒计时的时间
			  if (leftTime >= 0) {
			    // 天
			    this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
			    // 时
			    let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
			    this.hour = h < 10 ? '0' + h : h
			    // 分
			    let m = Math.floor(leftTime / 1000 / 60 % 60)
			    this.min = m < 10 ? '0' + m : m
			    // 秒
			    let s = Math.floor(leftTime / 1000 % 60)
			    this.second = s < 10 ? '0' + s : s
			  } else {
			    this.day = 0
			    this.hour = '00'
			    this.min = '00'
			    this.second = '00'
			  }
			  // 等于0的时候不调用
			  if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
				  dd.alert({
				    title: '温馨提示',
				    content: '您的使用已到期。为了不影响您的体验，请及时续费',
				    buttonText: '详情',
				    success: () => {
						setTimeout(()=>{
							dd.navigateTo({
								url: '../renew/renew'
							});
						},10);
				    },
				  });
			  } else {
			  // 递归每秒调用countTime方法，显示动态时间效果,
			    setTimeout(this.countTime, 1000)
			  }
			},　
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4
	}
	view {
		font-size: 28rpx;
		line-height: inherit
	}
	button {
		border-radius: 6rpx;
	}
	.message {
		padding: 30rpx;
		color: #3b4144;
		background: #ffffe1;
		margin-bottom: 20rpx;
		position: relative;
	}
	.renew {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}
	.time {
		color: red;
	}
	.info {
		padding: 30rpx;
		color: #3b4144;
		background: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.img {
		margin-left: 10rpx;
		margin-right:80rpx;
	}
	.text-title {
		margin: 20rpx 0;
	}
	.hr {
		height: 1rpx;
		background-color: #ccc;
		margin: 0 30rpx;
		text-align: center;
	}
	.menu {
		background-color: #FFFFFF;
		padding: 30rpx;
		color: #3b4144;
	}
	.menu-title {
		border-left: 2rpx solid #CCCCCC;
		padding-left: 10rpx;
	}
	.function {
		margin: 20rpx;
		padding: 10rpx;
		color: #3b4144;
		background: #fff;
		box-shadow: 5rpx 5rpx 0rpx 0rpx #e5e5e5;
	}
	.item:after {
		content:"";
		display:block;
		clear: both;
		font-weight: ;
	}
	.item {
		
	}
	.fl {
		float: left;
	}
	.flex-item {
		width: 50%;
		text-align: center;
		padding: 40rpx 0;
	}
	.flex-item image {
	}
	.item-title {
		margin-top: 10rpx;
		text-align: center;
		font-weight: bold;
	}
</style>